<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="../static/css/layui.css">
    <script src="../static/js/echarts.min.js"></script>
</head>

<body>
<div class="layui-container">
    <table class="layui-hide" id="student" lay-filter="student"></table>
</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="show_all">总览</button>
        <button class="layui-btn layui-btn-sm" lay-event="rendom_add" lay-on="load">随机生成</button>
        <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="logout">退出登陆</button>
    </div>
</script>

<!-- 表头某列 templet 属性指向的模板 -->
<script type="text/html" id="tools">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="show">展示</a>
</script>

<form class="layui-form" action="" id="form_edit" lay-filter="form_edit" style="margin-top: 20px;display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">学号</label>
        <div class="layui-input-block">
            <input type="text" name="s_id" lay-verify="required" autocomplete="off" placeholder="请输入"
                   lay-affix="clear" readonly class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-block">
            <input type="text" name="age" lay-verify="required" autocomplete="off" placeholder="请输入"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">java成绩</label>
        <div class="layui-input-block">
            <input type="text" name="java" lay-verify="required" autocomplete="off" placeholder="请输入"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">python成绩</label>
        <div class="layui-input-block">
            <input type="text" name="python" lay-verify="required" autocomplete="off" placeholder="请输入"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">mysql成绩</label>
        <div class="layui-input-block">
            <input type="text" name="mysql" lay-verify="required" autocomplete="off" placeholder="请输入"
                   class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="edit-commit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<!-- 个人数据展示 -->
<div class="layui-container">
    <div class="layui-row">

        <div id="show" lay-filter="show" style="height: 500px; width: 800px; margin-top: 20px;display: none">

        </div>

    </div>


</div>

<script src="../static/js/layui.js"></script>
<script src="../static/js/axios.js"></script>
<script>
    //修改
    const edit_student = async (data) => {
        const options = {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        }
        const response = await fetch('/api/editStudent', options)
        return await response.json()
    }
    layui.use(function () {
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;
        var laydate = layui.laydate;


        // 已知数据渲染
        var inst = table.render({
            elem: '#student',
            id: 'student',
            url: '/api/student',
            toolbar: '#toolbar',
            cols: [
                [   // 标题栏
                    {field: 'id', title: 'ID', width: 60, sort: true},
                    {field: 's_id', title: '学号', width: 150, sort: true},
                    {field: 'name', title: '姓名', width: 80},
                    {field: 'age', title: '年龄', width: 80, sort: true},
                    {field: 'java', title: 'java', width: 80, sort: true},
                    {field: 'java_grade', title: 'java成绩等级', width: 130},
                    {field: 'python', title: 'python', width: 95, sort: true},
                    {field: 'python_grade', title: 'python成绩等级', width: 130},
                    {field: 'mysql', title: 'mysql', width: 95, sort: true},
                    {field: 'mysql_grade', title: 'mysql成绩等级', width: 130},
                    {field: 'score', title: '总分', width: 80, sort: true},
                    {title: '操作', width: 207, templet: '#tools'}
                ]],
            page: true,
        });

        // 头部工具栏事件
        table.on('toolbar(student)', function (obj) {
            var options = obj.config; // 获取当前表格属性配置项
            var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据

            // 根据不同的事件名进行相应的操作
            switch (obj.event) { // 对应模板元素中的 lay-event 属性值
                case 'add':
                    window.show_add()
                    break;
                case 'show_all':
                    window.show_all(obj)
                    break;
                case 'rendom_add':
                    window.rendom_add(obj)
                    break;
                case 'logout':
                    window.logout(obj)
                    break;
            }
        });

        window.show_add = function () {
            layer.open({
                type: 2,
                title: '新增学生',
                shadeClose: true,
                maxmin: true, //开启最大化最小化按钮
                area: ['900px', '600px'],
                content: '/add_student'
            });
        }

        window.show_all = function (obj) {
            layer.open({
                type: 2,
                title: '数据总览',
                shadeClose: true,
                maxmin: true, //开启最大化最小化按钮
                area: ['1200px', '800px'],
                content: '/show_all'
            });
        }
        window.rendom_add = function () {
            const params = {param: parseInt(prompt('请输入要增加的条数（增加越多等待越久）：')) };
            axios.get('/api/addStu', { params: params }).then(res => {
                alert("新增数据成功")
                table.reload('student');
            }).catch(error => {
                // 请求失败，处理错误信息
                alert("新增失败")
            })

        }
        window.logout = function () {

            axios.get('/api/logout').then(res => {
                alert("已退出登录")
                location.reload();
            }).catch(error => {
                // 请求失败，处理错误信息
                alert("退出登录状态失败，请稍后尝试")
            })

        }
        // 单元格工具事件
        table.on('tool(student)', function (obj) {
            var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
            if (layEvent === 'edit') { //编辑
                window.show_edit(obj)
            } else if (layEvent === 'del') { //删除
                layer.confirm('确定删除吗？', function (index) {
                    layer.close(index);
                    window.del_student(obj)
                });
            } else if (layEvent === 'show') {
                window.show(obj)
            }
        });

        window.show_edit = (obj) => {
            console.log(obj.data)

            form.val('form_edit', obj.data);

            layer.open({
                type: 1,
                area: ['900px', '600px'],
                content: $('#form_edit'), // 捕获的元素
            });
        }
        const delt_student = async (data) => {
            const options = {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(data)
            }
            const response = await fetch('/api/delStudent', options)
            return await response.json()
        }
        window.del_student = (obj) => {
            var field = obj.data; // 获取表单字段值
            console.log(field)
            delt_student(field).then(function (res) {

                // 提交成功之后的回调
                if (!res.code) {
                    layer.msg(res.msg, {
                        icon: 1,
                        time: 1000,
                    }, function () {
                        layer.closeAll('page');
                        table.reload('student');
                    });
                } else {
                    layer.msg(res.msg, {
                        icon: 2,
                        time: 1000,
                    });
                }
            })
        }
        // 提交事件
        form.on('submit(edit-commit)', function (data) {
            var field = data.field; // 获取表单字段值
            // 此处可执行 Ajax 等操作
            console.log(field)
            edit_student(field).then(function (res) {

                // 提交成功之后的回调
                if (!res.code) {
                    layer.msg(res.msg, {
                        icon: 1,
                        time: 1000,
                    }, function () {
                        layer.closeAll('page');
                        table.reload('student');
                    });
                } else {
                    layer.msg(res.msg, {
                        icon: 2,
                        time: 1000,
                    });
                }
            })

            return false; // 阻止默认 form 跳转
        });

        function show_echarts(data) {
            var chartDom = document.getElementById('show');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '个人总成绩占比',

                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '科目',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: data.java, name: 'java'},
                            {value: data.python, name: 'python'},
                            {value: data.mysql, name: 'mysql'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        }

        //数据展示
        window.show = (obj) => {

            show_echarts(obj.data)
            layer.open({
                type: 1,
                area: ['900px', '600px'],
                content: $('#show'), // 捕获的元素
            });
        }
    });
</script>
</body>

</html>